<!--
* author: zhanghuan
* created: 2018/12/11
* describe: 第二种布局，用于登录后的页面
-->
<template>
  <div class="layout-two">
    <!-- 头部 -->
    <div class="layout-two-header fix">
      <router-link
        to="/home"
        class="title-cnt fl"
      >
        <h1 class="title">
          <!-- <img
            class="logo fl"
            src="../assets/login-logo.png"
            alt="党徽"
          /> -->
          <span class="fl">{{title}}</span>
        </h1>
      </router-link>
      <div class="user-action fr">
        <i class="fa fa-user-o fa-lg user-icon"></i>
        <span>您好，{{userRealname}}！</span>
        <i
          class="fa fa-sign-out fa-lg sign-out-icon"
          @click="logout"
        ></i>
      </div>
    </div>
    <!-- 导航 -->
    <nav-top class="layout-two-nav"></nav-top>
    <!-- 内容 -->
    <div class="layout-two-body">
      <router-view></router-view>
    </div>
    <div class="layout-two-footer"></div>
  </div>
</template>

<script type="text/ecmascript-6">
import axios from '@/js/axios'
import URL from '@/url'
import config from '../js/config'
import NavTop from './NavTop'
export default {
  name: "layoutTwo",
  components: { NavTop },
  data() {
    return {
      title: config.title,
      userRealname: ''
    }
  },
  methods: {
    /*
    * params: 无
    * return: 无
    * function: 初始化方法
    * */
    init() {
      let userRealname = localStorage.getItem('userRealname')
      if (userRealname) {
        this.userRealname = userRealname
      }
    },
    /*
    * params: 无
    * return: 无
    * function: 退出登录
    * */
    logout() {
      this.$confirm('您确定要退出登录吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.ajax({
          url: URL.logout,
          method: 'post',
          isShowLoading: true
        }).then(res => {
          
        })
        sessionStorage.removeItem('token')
        this.$router.push('/account/login')
      }).catch(() => {

      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped lang="scss">
@import "../style/variables.scss";
.layout-two {
  margin: 0 auto;
  background: #fff;
  .layout-two-header {
    min-width: 1240px;
    height: 60px;
    padding: 0 20px;

    .title-cnt {
      margin-top: 10px;
    }
    .title {
      font-size: 16px;
      font-weight: bold;
      color: $titC;

      .logo {
        height: 36px;
        margin: 3px 10px 0 2px;
      }
    }
    .user-action {
      line-height: 60px;
      .user-icon {
        color: $mainC;
        margin-right: 8px;
      }
      .sign-out-icon {
        color: #979797;
        margin-left: 3px;
        cursor: pointer;
        &:hover {
          color: $mainC;
        }
      }
    }
  }
  .layout-two-nav {
    min-width: 1240px;
    padding: 0 20px;
  }
  .layout-two-body {
    min-width: 1240px;
    padding: 0 20px;
    background: #fff;
  }
}
</style>
